<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/jsp/common/_includes.jsp"%>
<jsp:include page="/WEB-INF/jsp/common/_head.jsp"/>
<link rel="stylesheet" href="/static/vendor/upload/css/jquery.fileupload.css" type="text/css" />
<div class="ui grid">
    <div class="row">
        <div class="column">
            <div class="ui two column grid">
                <div class="three wide column">
                    <jsp:include page="/WEB-INF/jsp/common/_sidebar.jsp">
                        <jsp:param name="index" value="202"/>
                    </jsp:include>
                </div>
                <div id="container" class="thirteen wide column">
                    <div class="alert alert-success w200 center-block text-center " style="display: none; " role="alert"></div>
                    <ol class="breadcrumb">
                        <li><a href="/">后台管理</a></li>
                        <li><a href="/question">房间管理</a></li>
                        <li class="active">创建房间</li>
                    </ol>
			<form class="form-horizontal" id="addRoomForm" method="post"action="/room/add">
				<input type="hidden" id="js_url" name="image" >
				<div class="form-group">
					<label for="name" class="col-sm-3 control-label">房间图片</label>
					<div class="col-sm-5">
						<img id="preview" width="300px" height="170px" src="${room.image!=null?room.image:'http://placehold.it/300x170'}">
					</div>
					<div class="col-sm-2">
						<span class="btn btn-success btn-block fileinput-button">
							<i class="glyphicon glyphicon-plus"></i>
							<span>上传图片</span>
							<input id="fileupload" type="file" name="attachFile" data-url="/img/upload" multiple>
						</span>
					</div>
				</div>
				
				<div class="form-group">
					<label for="name" class="col-sm-3 control-label">房间名称</label>
					<div class="col-sm-5">
						<input type="text" class="form-control" id="name" name="name"
							autocomplete="off" placeholder="请输入房间名称" value="${room.name }">
						<i class="icon-ok-sign out"></i>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">房间分类</label>
					<div class="col-sm-5">
						<select class="form-control" name="category">
							<option value="">请选择房间分类</option>
							<c:forEach items="${roomTypeList}" var="roomType">
								<option value="${roomType.code}"
								<c:if test="${room.category == roomType.code }">selected="selected"</c:if>>${roomType.text}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">房间类型</label>
					<div class="col-sm-5">
						<c:forEach items="${roomKindList}" var="roomKind" varStatus="status">
							<label class="radio-inline">
						       <c:choose>
								<c:when test="${not empty room.type }">
									x
									<input type="radio" name="type" value="${roomKind.code }" ${room.type == roomKind.code ? 'checked=checked' : '' }>
								</c:when>
								<c:otherwise>
									<input type="radio" name="type" value="${roomKind.code }" ${status.index == 0 ? 'checked=checked' : ''}>
								</c:otherwise>
						       </c:choose>
								${roomKind.text}
							</label>
						</c:forEach>
					</div>
				</div>
				<div class="form-group <c:if test="${room.type != 2}">hidden</c:if>"
					id="recordUrl">
					<label for="name" class="col-sm-3 control-label">点播视频地址</label>
					<div class="col-sm-5">
						<input type="text" class="form-control" name="recordUrl"
							autocomplete="off" value="${room.recordUrl}" /> <span
							class="ml5 desc">暂时只支持直接url点播 <br />比如
							http://222.211.8.235/video/xxxxx.flv
						</span>
					</div>
				</div>
				<div id="hackInfo" class="<c:if test="${room.type != 3}">hidden</c:if>">
					<div class="form-group">
						<label for="name" class="col-sm-3 control-label">目标网站</label>
						<div class="col-sm-5">
							<input type="text" class="form-control" name="hackType"
								autocomplete="off" value="${room.hackType}" />
						</div>
					</div>
					<div class="form-group">
						<label for="name" class="col-sm-3 control-label">目标网站视频位置</label>
						<div class="col-sm-5">
							<input type="text" class="form-control" name="hackIndex"
								autocomplete="off" value="${room.hackIndex}" />
						</div>
					</div>
					<div class="form-group">
						<label for="name" class="col-sm-3 control-label">目标网站房间号</label>
						<div class="col-sm-5">
							<input type="text" class="form-control" name="hackRoomID"
								autocomplete="off" value="${room.hackRoomID}" />
						</div>
					</div>
				</div>
				<div class="form-group <c:if test="${room.type != 4}">hidden</c:if>"
					id="roomAddress">
					<label for="name" class="col-sm-3 control-label">转播房间（Id号）</label>
					<div class="col-sm-5">
						<input type="hidden" name="relayRoomId" value="${room.relayRoomId }">
						<input type="text" class="form-control" name="roomAddress"
							autocomplete="off" value="${room.relayRoomId }"> <span
							class="ml5 desc">您可以直接输入你需要转播的房间网址 <br />比如
							http://chat.51czd.com/room/1005 <br />或者直接输入房间编号，比如 1005
						</span>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">可见类型</label>
					<div class="col-sm-9">
						<label class="radio-inline"> <input type="radio" name="visible" value="0" checked="checked">全部可见
						</label> <label class="radio-inline"> <input type="radio" name="visible" value="1">游客不可见
						</label>
					</div>
				</div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">设置房主</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="homeowner" name="homeowner" autocomplete="off" placeholder="请输入房主ID" >
                        <i class="icon-ok-sign out"></i>
                    </div>
                </div>
				<div class="form-group">
					<label class="col-sm-3 control-label">设置创建人</label>
					<div class="col-sm-5">
						<input type="text" class="form-control" id="createdBy" name="createdBy" autocomplete="off" placeholder="请输入创建人ID" >
						<i class="icon-ok-sign out"></i>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-2">
						<button type="submit" class="btn btn-block btn-orange">提交</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
</div>
    </div>
<jsp:include page="/WEB-INF/jsp/common/_foot.jsp"></jsp:include>
<script src="/static/vendor/upload/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/vendor/upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/static/vendor/jquery.validate/jquery.validate.js"></script>
<script src="/static/vendor/upload/js/jquery.fileupload.js"></script>
<script type="text/javascript">
    $(function(){
        $("#addRoomForm").validate({
            rules: {
                name: 'required',
                type: 'required',
                category: 'required',
                homeowner: {required:true,number:true},
	            createdBy: {required:true,number:true},
                visible: 'required'
            },
            messages: {
                name: {
                    required: "请输入房间名称"
                },
                type: {
                    required: "请选择房间类型"
                },
                category: {
                    required: "请选择房间分类"
                },
                homeowner: {
                    required: "请输入房主ID",
	                number:"请输入数字"
                },
	            createdBy: {
                    required: "请输入创建人ID",
			        number:"请输入数字"
                },
                visible: {
                    required: "请选择房间可见类型"
                }
            }
            /*,
            submitHandler: function(form){
                var btn = $('button:submit', form);
                btn.button('loading');
                $.ajax({
                    type: 'post',
                    url: $(form).attr('action'),
                    data: $(form).serialize(),
                    success: function(res){
                        btn.button('reset');
                        if(res.status == 'ok'){
                            success(res.message);
                            setTimeout(function(){
                                window.location.href="/admin/room";
                            },2000);
                        }else{
                            error(res.message);
                        }
                    }
                });
            }*/
        });

        $('input:radio[name=type]').on('click', function(){
            if($(this).val() == 1){
                $('#roomAddress').addClass('hidden');
                $('#recordUrl').addClass('hidden');
            }else if($(this).val() == 2){
                $('#recordUrl').removeClass('hidden');
                $('#roomAddress').addClass('hidden');
            }else if($(this).val() == 4){
                $('#roomAddress').removeClass('hidden');
                $('#recordUrl').addClass('hidden');
            }
        });

        // 初始化上传组件
        $('#fileupload').fileupload({
            dataType : 'json',
            done : function(e, data) {
                if (data.result.status == 'ok') {
                    $('#js_url').val(data.result.url);
                    $('#preview').attr('src', data.result.url);
                }
            }
        });
    });
</script>